<template>
	<view :class="[primarySize()]">
		<view class="zz" @click="show" v-if='show'></view>
		<view class="identity_choose" v-if='show'>
			<view class="flex-box pl30">
				<view class="flex-grow-1 fs28 col3">选择身份</view>
				<view class="close_img" @click="showChange">
					<image src="https://admin.mosizp.cn/static/public/close_img.png" mode="aspectFit"></image>
				</view>
			</view>
			<scroll-view scroll-y class="plr30">
				<view class="choose_item flex-box" v-for="(item,info) in idenity" @click="bindCheck(info)">
					<view class="flex-grow-1">{{item.name}}</view>
					<image :src="iconPath(info==check?'choose_sc':'choose_uc')" mode="aspectFit"></image>
				</view>
			</scroll-view>

		</view>
		<view class="page-foot">
			<view class="go_reg">已有账号？<navigator open-type="navigateBack">立即登录</navigator>
			</view>
		</view>
		<view class="container bg-white">
			<form @submit="mobileRegister" class="reg_main" v-if="nav!=1">
				<view class="reg_item">
					<input type="number" name="mobile" @input="inputMobile" maxlength="11" placeholder="输入手机号"
						placeholder-class="cold7" class="flex-grow-1" />
				</view>
				<view class="reg_item flex-box">
					<input type="number" name="captcha" placeholder="输入验证码" placeholder-class="cold7"
						class="flex-grow-1"></input>
					<button hover-class="none" class="send_btn"
						@click="sendCaptcha">{{countdown>0?'重新发送('+countdown+')':'获取验证码'}}</button>
				</view>
				<view class="reg_item">
					<input type="password" name="password" @input="inputPassword" placeholder="输入密码"
						placeholder-class="cold7" class="flex-grow-1" />
				</view>
				<button formType="submit" hover-class="none" class="btn1 mt50">注册</button>
			</form>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	var validate = require("../../xilu/validate.js");
	export default {
		data() {
			return {
				wx_account: null,
				nav: 0,
				show: false,
				check: '-1',
				group_id: "",
				countdown: 0,
				mobile: "",
				isLogin: true
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			let page = this;
			page.isLogin = this.$core.getUserinfo() ? true : false
			// uni.$on(app.globalData.Events.WxAccountUpdate, page.eventOnWxAccountUpdate, page);
		},
		onUnload: function() {
			// uni.$off(app.globalData.Events.UserLogin, this.eventOnUserLogin);
		},
		methods: {
			showChange: function(e) {
				this.show = !this.show
			},
			bindCheck(index) {
				this.check = index
				this.group_id = index + 1
			},
			eventOnWxAccountUpdate: function(wxAccount) {
				this.wx_account = wxAccount
			},
			tab(index) {
				this.nav = index
			},
			inputMobile(event) {
				this.mobile = event.detail.value
			},
			inputPassword(event) {
				this.password = event.detail.password
			},
			sendCaptcha() {
				let page = this;
				if (page.countdown > 0) {
					return;
				}
				let mobile = this.mobile;
				if (mobile.length !== 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				page.$core.post({
					url: '/xilujob.sms/send',
					data: {
						mobile: mobile
					},
					success(ret, response) {
						page.countdown = 60;
						let timer = setInterval(function() {
							let tick = page.countdown - 1;
							page.countdown = tick;
							if (tick <= 0) {
								clearInterval(timer);
							}
						}, 1000);
						
						
					}
				});
			},
			mobileRegister(event) {
				let page = this;
				let data = event.detail.value;
				var rule = [{
					name: 'mobile',
					rules: ['require', 'mobile'],
					errorMsg: {
						require: '请输入手机号',
						mobile: '请输入正确的手机号'
					}
				}, {
					name: 'captcha',
					rules: ['require', 'length:4'],
					errorMsg: {
						require: '请输入验证码',
						length: '请输入正确的验证码'
					}
				}, {
					name: 'password',
					rules: ['require', 'min:6'],
					errorMsg: {
						require: '请输入密码',
						min: '密码长度至少6位数'
					}
				}, ];

				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				data.group_id = 2;
				let recom_pid = uni.getStorageSync('recom_pid') || '';
				let recom_group = uni.getStorageSync('recom_group') || '';
				if (recom_pid) {
					data['pid'] = recom_pid;
					data['first_group_id'] = recom_group;
				}
				this.$core.post({
					url: '/xilujob.user/register',
					data: data,
					success(ret, response) {
						page._registerSuccess(ret.data.userinfo);
					}
				});
			},
			emailRegister(event) {
				let page = this;
				let data = event.detail.value;
				var rule = [{
					name: 'group_id',
					rules: ['require'],
					errorMsg: {
						require: '请选择注册身份'
					}
				}, {
					name: 'username',
					rules: ['require', 'length:6,20'],
					errorMsg: {
						require: '请输入用户名',
						length: '用户名为6到20个英文字母、数字、横线、下划线'
					}
				}, {
					name: 'email',
					rules: ['require', 'email'],
					errorMsg: {
						require: '请输入用户名',
						email: '请输入正确的邮箱'
					}
				}, {
					name: 'password',
					rules: ['require', 'length:6,20'],
					errorMsg: {
						require: '请输入密码',
						length: '密码最少6位，最多20位'
					}
				}, ];

				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				let wxAccount = app.getWxAccount();
				if (!wxAccount || !wxAccount.openid) {
					uni.showToast({
						title: '请稍候，正在获取微信账号授权',
						icon: 'none'
					});
					return;
				}
				data.openid = wxAccount.openid;
				data.city_id = this.$core.getCurrentCity().id;
				this.$core.post({
					url: '/user/register',
					data: data,
					success(ret, response) {
						page._registerSuccess(ret.data.userinfo);
					}
				});
			},
			_registerSuccess(userinfo) {
				this.$core.setUserinfo(userinfo);
		// 连接WebSocket
			console.log('注册成功，正在连接WebSocket...');
			this.$chatIM.connectSocket();

				if (userinfo.group_id == 1) {
					uni.navigateBack({
						delta: 2
					});
				} else {
					uni.reLaunch({
						url: '/pages/company/improve_corporate_information'
					});
				}
				uni.$emit(app.globalData.Events.UserLogin, userinfo);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 36rpx;
	}

	.heaeder {
		width: 144rpx;
		height: 144rpx;
		display: block;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto
	}

	.heaeder image {
		width: 100%;
		height: 100%;
		display: block
	}

	.header_name {
		font-size: 32rpx;
		color: #000000;
		text-align: center
	}

	.tab_con view {
		font-size: 32rpx;
		color: #000000;
		line-height: 80rpx;
		margin: 0 65rpx;
		padding-bottom: 6rpx;
		margin-top: 50rpx;
	}

	.tab_con view.active {
		color: var(--primary);
		border-bottom: 6rpx solid var(--primary);
		padding-bottom: 0
	}

	.reg_main {
		padding: 56rpx 73rpx 0;
		display: block;
	}

	.reg_item {
		box-shadow: 0px 1rpx 18rpx 0px rgba(0, 0, 0, 0.08);
		background-color: #fff;
		border-radius: 50rpx;
		line-height: 95rpx;
		font-size: 28rpx;
		padding: 0 30rpx;
		margin-bottom: 35rpx;
	}

	.reg_item input {
		height: 95rpx;
		line-height: 95rpx;
		padding: 0 17rpx;
	}

	.reg_item view {
		padding: 0 17rpx;
	}

	.primary_orange {
		.send_btn {
			background: linear-gradient(24deg, #4cd964 0%,  #2FC971 100%);
			font-size: 24rpx;
			color: #fff;
			line-height: 59rpx;
			height: 59rpx;
			padding: 0 20rpx;
			border-radius: 50rpx;
		}

		.btn1 {
			background: linear-gradient(24deg, #4cd964 0%,  #2FC971 100%);
			border-radius: 4rpx;
			border: 0;
			height: 82rpx;
			line-height: 82rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}

	.primary_blue {
		.send_btn {
			background: var(--primary);
			font-size: 24rpx;
			color: #fff;
			line-height: 59rpx;
			height: 59rpx;
			padding: 0 20rpx;
			border-radius: 50rpx;
		}

		.btn1 {
			background: var(--primary);
			border-radius: 4rpx;
			border: 0;
			height: 82rpx;
			line-height: 82rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}

	.cold7 {
		color: #d7d7d7
	}

	.go_reg {
		font-size: 28rpx;
		color: #333;
		text-align: center;
		padding-bottom: 50rpx
	}

	.go_reg navigator {
		color: var(--primary);
		display: inline;
	}


	.zz {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 201
	}

	/* 弹窗 */
	.close_img {
		padding: 40rpx 30rpx;
	}

	.close_img image {
		width: 15rpx;
		height: 15rpx;
		display: block
	}

	.identity_choose {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 202;
		background-color: #fff;
	}

	.identity_choose scroll-view {
		box-sizing: border-box
	}

	.choose_item {
		font-size: 32rpx;
		color: #101010;
		line-height: 113rpx;
		border-bottom: 1rpx solid #F3F3F3
	}

	.choose_item image {
		width: 38rpx;
		height: 38rpx;
		display: block
	}
</style>